<template>
  <el-form ref="announcementCreateForm" :model="form" label-width="80px">
    <el-form-item label="公告标题">
      <el-input v-model="form.title"/>
    </el-form-item>
    <el-form-item label="公告内容">
      <ckeditor ref="editor" :content.sync="form.content"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit" :loading="isLoading">发布公告</el-button>
      <el-button class="right" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'SendAnnouncement', // 发送公告
  data() {
    return {
      form: {
        title: '',
        content: '',
      },
      isLoading: false, // 正在发送公告
    };
  },
  methods: {
    // 发送公告
    onSubmit() {
      this.isLoading = true;
      this.$api.announcements.create({
        title: this.form.title.trim(),
        content: this.form.content,
      }).then((res) => {
        this.$message.success('发送成功');
        this.$emit('sentAnnc', res.data);
        this.clear();
      }).catch(() => {})
        .then(() => { this.isLoading = false; });
    },
    // 清空
    clear() {
      this.form.title = '';
      this.$refs.editor.clearContent();
    },
  },
};
</script>

<style></style>
